<template>
  <div class="process-step">
    <div class="title">审批流程</div>
    <a-timeline class="process" v-if="data.length">
      <a-timeline-item v-for="processItem of data" :key="processItem.key">
        <!-- 节点图标 -->
        <template #dot>
          <a-avatar
            :size="40"
            style="color: #fff"
            :style="{ backgroundColor: processMap[processItem.type].color }"
          >
            <template #icon>
              <FileAddOutlined v-if="processItem.type == 'start'" />
              <AuditOutlined v-if="processItem.type == 'approval'" />
              <CarryOutOutlined v-if="processItem.type == 'deal'" />
              <SisternodeOutlined v-if="processItem.type == 'copy'" />
              <FileDoneOutlined v-if="processItem.type == 'end'" />
            </template>
          </a-avatar>
        </template>
        <!-- 节点内容 -->
        <div class="process-content">
          <div class="node-title">
            <span>{{ processItem.data.name || processItem.typeTxt }}</span>
            <a-tag
              style="margin-left: 10px"
              color="orange"
              v-if="processItem.type == 'approval'"
            >
              {{ processItem.data.approvalWay == 1 ? "会签" : "或签" }}
            </a-tag>
          </div>
          <!-- 审批节点 -->
          <div
            v-if="
              processItem.type == 'approval' &&
              processItem.data.approver_userArr &&
              processItem.data.approver_userArr.length
            "
          >
            <div
              v-for="item of processItem.data.approver_userArr"
              :key="item.id"
              class="flex align-middle between mt-10"
            >
              <div class="flex align-middle">
                <a-avatar
                  :src="item.avatar"
                  :size="30"
                  style="color: #fff; background-color: #2681f3"
                >
                  <template #icon><UserOutlined /></template>
                </a-avatar>
                <span class="ml-10">{{ item.realname }}</span>
              </div>
            </div>
          </div>
          <!-- 处理节点 -->
          <div
            v-if="
              processItem.type == 'deal' &&
              processItem.data.dealer_userArr &&
              processItem.data.dealer_userArr.length
            "
          >
            <div
              class="flex align-middle mt-10"
              v-for="item of processItem.data.dealer_userArr"
              :key="item.id"
            >
              <a-avatar
                :src="item.avatar"
                :size="30"
                style="color: #fff; background-color: #2681f3"
              >
                <template #icon><UserOutlined /></template>
              </a-avatar>
              <span class="ml-10">{{ item.realname }}</span>
            </div>
          </div>
          <!-- 抄送节点 -->
          <div
            v-if="
              processItem.type == 'copy' &&
              processItem.data.ccList_userArr &&
              processItem.data.ccList_userArr.length
            "
          >
            <div
              class="flex align-middle mt-10"
              v-for="item of processItem.data.ccList_userArr"
              :key="item.id"
            >
              <a-avatar
                :src="item.avatar"
                :size="30"
                style="color: #fff; background-color: #2681f3"
              >
                <template #icon><UserOutlined /></template>
              </a-avatar>

              <span class="ml-10">{{ item.realname }}</span>
            </div>
          </div>
          <!-- 抄送人 -->
          <div
            v-if="
              processItem.type != 'copy' &&
              processItem.data.ccList_userArr &&
              processItem.data.ccList_userArr.length
            "
            class="mt-10"
            style="background: #f7f7f7; padding: 10px; border-radius: 8px"
          >
            <a-row type="flex" :gutter="[24, 24]">
              <a-col>
                <a-tag color="blue" style="margin-top: 4px; margin-right: -8px">
                  抄送人
                </a-tag>
              </a-col>
              <a-col
                v-for="item of processItem.data.ccList_userArr"
                :key="item.id"
              >
                <div class="flex align-middle">
                  <a-avatar
                    :src="item.avatar"
                    :size="30"
                    style="color: #fff; background-color: #2681f3"
                  >
                    <template #icon><UserOutlined /></template>
                  </a-avatar>
                  <span class="ml-10">{{ item.realname }}</span>
                </div>
              </a-col>
            </a-row>
          </div>
        </div>
      </a-timeline-item>
    </a-timeline>
    <div v-else class="process-unshow">
      <a-badge status="default" text="填写信息后将展示审批流程" />
    </div>
  </div>
</template>

<script>
import { defineComponent, reactive, toRaw, toRefs, watch } from "vue";
import {
  UserOutlined,
  FileAddOutlined,
  AuditOutlined,
  CarryOutOutlined,
  SisternodeOutlined,
  FileDoneOutlined,
} from "@ant-design/icons-vue";

const processMap = {
  start: {
    color: "#2681f3",
  },
  approval: {
    color: "#ff8800",
  },
  deal: {
    color: "#935af6",
  },
  copy: {
    color: "#3370ff",
  },
  end: {
    color: "#2681f3",
  },
};

export default defineComponent({
  name: "ProcessStep",
  props: {
    process: {
      type: Array,
      default: () => [],
    },
  },
  components: {
    UserOutlined,
    FileAddOutlined,
    AuditOutlined,
    CarryOutOutlined,
    SisternodeOutlined,
    FileDoneOutlined,
  },
  setup(props) {
    const state = reactive({
      data: [],
    });
    watch(
      () => props.process,
      (process) => {
        if (process.length) {
          if (!state.data.length) {
            state.data = process;
          }
        } else {
          state.data = [];
        }
      }
    );
    return {
      processMap,
      ...toRefs(state),
    };
  },
});
</script>

<style lang="less" scoped>
.process-step {
  margin: 10px 0;
  .process {
    margin-top: 20px;
    padding: 20px;
    .process-content {
      margin-left: 20px;
      padding-bottom: 20px;
      line-height: 24px;
      .node-title {
        line-height: 30px;
        font-weight: bold;
      }
    }
  }
  .title {
    margin: 10px 0;
    color: #000;
  }
  .item-content {
    .content {
      margin: 10px 0;
    }
  }
  .process-unshow {
    padding: 10px 0;
  }
}
</style>
